<template>
  <!-- 确认订单页面,点击提交订单后到订单里的未支付页面,在点提交付款后到付款成功页面 -->
  <div class="confirmation">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" title="确认订单">
      <van-icon slot="left" name="arrow-left" @click="$router.back()" />
      <!-- $router.back() -->
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 地址栏 -->
    <van-cell class="SelAddress">
      <i slot="icon" class="iconfont icon-dizhi"></i>
      <div slot="title">
        收货人：{{selectLotion.receive_user_name}}
        <span
          class="photo"
        >{{selectLotion.receive_user_phone}}</span>
      </div>
      <span slot="label" class="address">
        <div>收货地址 : {{ selectLotion.receive_user_address}}</div>
        <!-- 跳转到地址选择页面 -->
        <van-icon name="arrow" @click="siteshow = true" />
      </span>
    </van-cell>
    <!-- 选择的商品 -->
    <!-- 表单 -->
    <div class="shop">
      <van-row>
        <van-col span="4" class="shopimg">
          <van-image round width="1.2rem" height="1.2rem" :src="store.url" />
          <span>{{store.id}}</span>
        </van-col>
        <van-col span="20">
          <div class="shopname">{{store.name}}</div>
          <div>
            <span>电话号码 {{store.tel}}</span>
            <!-- <span class="fr">"距离 241m"</span> -->
          </div>
          <div class="shopas">商家地址 {{store.address}}</div>
        </van-col>
      </van-row>

      <!-- 选购商品  -->
      <div>
        <div class="goods">选购商品</div>
        <selecting-goods v-for="(goods, index) in goodsList" :key="index" :goods="goods" />
      </div>

      <!-- 合计 -->
      <div class="addUp">
        <van-cell title="包装" size="large">
          <span>￥ {{ packing }}</span>
        </van-cell>
        <van-cell title="活动优惠">
          <div>
            <span>满50-3 &nbsp;&nbsp;&nbsp;￥ {{ Mprice }}</span>
          </div>
        </van-cell>

        <!-- 优惠券单元格 -->
        <coupon-list
          :coupons="coupon"
          :disabledCoupons="disabledCoupons"
          @chosenCoupon="OnchosenCoupon($event)"
        />

        <!-- 配送方式 -->
        <van-cell title="配送方式" class="distribution" @click="deliveryshow = true">
          <span>{{ delivery_name }} &nbsp; &nbsp; &nbsp;</span>
          <span v-if="delivery_price">￥ {{ delivery_price }}</span>
          <div v-if="deliveryshow">
            <delivery
              :deliveryshow="deliveryshow"
              :shop-id="store.id"
              @item="Onitem($event)"
              @close="ondeliveryshow"
            />
          </div>
          <!-- </van-popup> -->
        </van-cell>

        <van-submit-bar
          v-if="delivery_name === '超出配送范围'"
          disabled
          :price="3050"
          button-text="提交订单"
          tip="该店铺不支持跨域配送: 超出配送范围"
          tip-icon="info-o"
          @submit="onSubmit"
        />
        <!-- 合计 -->
        <van-submit-bar v-else :price="subtotal1" button-text="确认订单" @submit="onSubmit" />
      </div>
    </div>
    <van-dialog
      v-model="affirmshow"
      title="确认订单"
      message="确认是否支付"
      show-cancel-button
      @cancel="$emit('close')"
      @confirm="onConfirm"
    ></van-dialog>

    <!-- 地址选择弹出层 -->
    <van-popup v-model="siteshow" position="bottom" :style="{ height: '80%' }">
      <shipping-address @site-successfly="onSiteSuccessfly" :siteshow="siteshow"></shipping-address>
    </van-popup>
  </div>
</template>

<script>
// import store from '@/store'
import SelectingGoods from './component/selecting-goods'
import couponList from './component/coupon-list'
import ShippingAddress from '@/views/my/components/address/shipping-address.vue'
import Delivery from './component/delivery'
import { getAddress } from '@/api/address.js'
import { getDiscounts } from '@/api/discounts.js'
import { removeItem } from '@/utils/storage.js'

import dayjs from 'dayjs'

export default {
  name: 'Comfirmation',
  components: {
    SelectingGoods,
    couponList,
    ShippingAddress,
    Delivery
  },
  data () {
    return {
      selectLotion: {}, // 存放选中的地址
      store: {
        id: 36,
        name: '新佳宜',
        tel: '1309819900',
        address: '长沙市.岳麓区.桐梓坡路.麓谷林语',
        url: 'https://img.yzcdn.cn/vant/cat.jpeg'
      }, // 店铺的地址
      subtotal: [], // 每个商品的小计
      siteshow: false, // 地址选择弹出层的显示与隐藏
      coupon: [], // 优惠劵列表
      disabledCoupons: [], // 不能使用优惠劵列表
      showList: false, // 显示优惠劵列表
      sale: '',
      // xiaoji: 0,
      goodsList: [{
        goods_id: 1,
        goods_name: '猪肉',
        goods_amount: 1,
        goods_price: 13.13,
        img: 'https://img.yzcdn.cn/vant/ipad.jpeg'
      }, {
        goods_id: 2,
        goods_name: '牛肉',
        goods_amount: 2,
        goods_price: 33.13,
        img: 'https://img.yzcdn.cn/vant/ipad.jpeg'
      }, {
        goods_id: 3,
        goods_name: '羊肉',
        goods_amount: 2,
        goods_price: 61.10,
        img: 'https://img.yzcdn.cn/vant/ipad.jpeg'
      }],
      packing: 5,
      Mprice: 3, //满减
      delivery_name: '选择配送方式',
      delivery_price: '',
      deliveryshow: false, // 配送盒子的显示与隐藏
      total: 0, // 合计
      affirmshow: false, // 点击确认订单弹框的显示与隐藏
      good: []
    }
  },
  computed: {
    // 计算商品的价格
    subtotal1: function () {
      let xiaoji = 0
      this.goodsList.forEach((key, index) => {
        xiaoji += parseFloat(key.goods_amount) * parseFloat(key.goods_price)
      })
      xiaoji = (xiaoji + parseFloat(this.packing) - parseFloat(this.Mprice)) * 100
      if (this.sale) {
        xiaoji = xiaoji - this.sale
      }
      if (this.delivery_price) {
        const price = this.delivery_price[0]
        xiaoji = xiaoji + price * 100
      }
      return xiaoji - 0
    },
    Deliveryshow: function () {
      return this.deliveryshow
    }
  },
  created () {
    this.onload()
    // this.getCoupon()
  },
  methods: {
    // 进入页面加载获取数据
    async onload () {
      try {
        const { data } = await getAddress()
        data.data.forEach((key, index) => {
          if (key.is_default === 'yes') {
            const useAddress = key
            this.selectLotion = useAddress
            return true
          }
        })
        if (this.$store.state.stores.shop_name) {
          // 如果有店铺信息就执行
          const shop = this.$store.state.stores
          this.store = []
          this.store.id = shop.shop_id
          this.store.name = shop.shop_name
          this.store.tel = shop.shop_phone
          this.store.address = shop.shop_address
          this.store.url = shop.shop_avatar
        }
      } catch (err) {
        this.$toast('数据获取失败')
      }
      if (this.$store.state.shops) {
        // 有动态列表
        this.getGoodsList()
      }
      if (this.$store.state.goodsLists) {
        this.getGoodsInfo()
      }
      this.getCoupon()
    },
    // 获取优惠劵
    async getCoupon () {
      // 优惠劵
      try {
        const { data } = await getDiscounts()
        data.data.forEach((item, i) => {
          // 不可用优惠劵表
          let flag
          flag = item.shop_id !== this.store.id
          if (item.shop_id === null) {
            flag = false
          }
          if (flag || dayjs(item.end_time).unix() < +new Date() / 1000) {
            const coup = {}
            coup.name = item.discounts_name
            coup.condition = '无使用门槛\n最多优惠12元'
            coup.id = item.discounts_id
            coup.startAt = dayjs(item.start_time).unix()
            coup.endAt = dayjs(item.end_time).unix()
            coup.valueDesc = item.discounts_price
            coup.value = item.discounts_price * 100
            coup.unitDesc = '元'
            this.disabledCoupons.push(coup)
          } else { // 可用
            const coup = {}
            coup.name = item.discounts_name
            coup.condition = '无使用门槛\n最多优惠12元'
            coup.id = item.discounts_id
            coup.startAt = dayjs(item.start_time).unix()
            coup.endAt = dayjs(item.end_time).unix()
            coup.valueDesc = item.discounts_price
            coup.value = item.discounts_price * 100
            coup.unitDesc = '元'
            this.coupon.push(coup)
          }
        })
      } catch (err) {
        this.$toast('优惠劵数据获取失败')
      }
    },

    OnchosenCoupon (i) {
      this.sale = this.coupon[i].value // 优惠金额
    },
    // 地址选择
    onSiteSuccessfly (data) {
      this.siteshow = false
      this.selectLotion.receive_user_name = data.name
      this.selectLotion.receive_user_phone = data.tel
      this.selectLotion.receive_user_address = data.address
      this.selectLotion.receive_address_id = data.id
    },
    // 提交信息
    onSubmit () {
      this.affirmshow = true
      removeItem('goodsCarListData')
    },
    onConfirm () {
      this.$router.push({ name: 'pay' }) // 放跳转到待支付页面的名字
      this.$store.commit('setGoodsLists', null)
      this.$store.commit('setStore', null)
    },
    // 商品列表
    getGoodsList () {
      const shops = this.$store.state.shops
      this.goodsList = []
      shops.forEach((item, i) => {
        this.goodsList.push({
          goods_id: item.goods_id,
          goods_name: item.goods_name,
          goods_amount: 2,
          goods_price: item.sale_price, // 销售价
          img: item.goods_image
        })
      })
    },
    // 商品列表
    getGoodsInfo () {
      this.goodsList = []
      const shops = this.$store.state.goodsLists
      this.goodsList.push({
        goods_id: shops.goodsId,
        goods_name: shops.goods_name,
        goods_amount: shops.num,
        goods_price: shops.current_price, // 销售价
        img: shops.goods_img
      })
    },
    Onitem (item) {
      this.delivery_name = item.name
      this.delivery_price = item.subname
    },
    ondeliveryshow () {
      this.deliveryshow = false
    },
    async onclick () {
      this.deliveryshow = true
    }

  }
}
</script>

<style scoped lang="less">
.confirmation {
  .page-nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #e70201;
    /deep/ .van-icon-arrow-left {
      color: #fff;
      font-size: 55px;
    }
    /deep/ .van-nav-bar__title {
      color: #fff;
      font-size: 40px;
    }
  }

  /deep/ .SelAddress {
    padding-top: 110px;
    .icon-dizhi {
      font-size: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 20px;
    }
    .van-cell__label {
      width: 575px;
    }
    /deep/ .van-cell__value {
      flex: unset;
      height: 40px;
    }
    .photo {
      position: absolute;
      right: 60px;
    }
    .van-icon-arrow {
      position: absolute;
      right: 20px;
      transform: translateY(50%);
      top: 50%;
    }
  }
  .shop {
    margin-top: 20px;
    font-size: 30px;
    color: #4f4f4f;
    .van-row {
      padding: 20px;
      background-color: #fff;
      border-bottom: 1px solid #818181;
      .shopimg {
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        span {
          color: #818181;
        }
      }
      .fr {
        position: absolute;
        left: 380px;
      }
      .shopas {
        padding-top: 15px;
      }
    }
  }
  // 选购商品
  /deep/ .van-card,
  .goods {
    background-color: #fff;
  }
  .goods {
    height: 60px;
    line-height: 60px;
    padding-left: 40px;
    font-size: 40px;
    font-stretch: 600;
  }
  .addUp {
    margin-top: 20px;
    .distribution {
      margin-bottom: 170px;
    }
    .total {
      .van-submit-bar__button--danger {
        background: #737373;
      }
    }
  }
}
</style>
